<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*后代选择器,只要包含该标签对象即可*/
			div span{
				font-weight: 700;
				font-family: "宋体";
			}
			/*子选择器，直系子标签，p标签下的span标签没效*/
			div>span {
				color: brown;
			}
			
			/*兄弟选择器，只会改变下面相邻的元素对象*/
			/*#p_1+p{
				/*第二个p标签有效果*/
				/*color: #A52A2A;
			}*/
			/*兄弟选择器，（上标波浪线）后面所有兄弟对象都会改变*/
			#p_1~p{
				color: red;
				font-size: 30px;
			}
			/*伪类选择器*/
			a:hover{
				color: red;
				
			}
			a {
				/*不要下划线*/
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div>
			<span>北京尚学堂</span>
		</div>
		<span>北京尚学堂</span>
		<!--子选择器-->
		<div>
			<span>北京尚学堂</span>
			<p>
				<span>北京尚学堂</span>
			</p>
		</div>
		<hr />
		<!--兄弟选择器-->
		<div>
			<p id="p_1">我们不一样</p>
			<p>我们不一样</p>
			<p>我们不一样</p>
		</div>
		<hr />
		<a href="#">淘宝</a>
	</body>
</html>
